<template>
  <div>
    <el-row :gutter="20">

      <!-- 搜索表单 -->
      <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
        <el-form-item label="订单号" prop="orderNo">
          <el-input
            v-model="queryParams.orderNo"
            placeholder="请输入订单号"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange">
        <el-table-column prop="orderId" label="订单ID" align="center" width="100" />
        <el-table-column prop="orderNo" label="订单号" align="center" width="200" />
        <el-table-column prop="seat.seatNumber" label="座位号" align="center" />
        <el-table-column prop="status" label="状态" align="center" />
        <el-table-column prop="total" label="总金额" align="center" />
        <el-table-column prop="orderTime" label="时间" align="center" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="small" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页加载 -->
      <el-pagination
        :current-page="queryParams.pageNum"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>

    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="订单ID" prop="orderId">
          <el-input v-model="form.orderId" :disabled="true" />
        </el-form-item>
        <el-form-item label="订单号" prop="orderNo">
          <el-input v-model="form.orderNo" :disabled="true" />
        </el-form-item>
        <el-form-item label="总金额" prop="total">
          <el-input v-model="form.total" disable />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="form.status" size="small" placeholder="请选择">
            <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="open = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
import {
  listOrderByPage,
  updateOrder,
  cancelOrder,
  cancelOrderItem
} from '@/api/pos/orderManage'
  export default {
    name: 'OrderManage',
    data() {
      return {
        // 状态类型
      statusOptions: [{
        value: '已预定',
        label: '已预定'
      },
      {
        value: '已付款',
        label: '已付款'
      },
      {
        value: '已备餐',
        label: '已备餐'
      },
      {
        value: '已完成',
        label: '已完成'
      },
      {
        value: '已取消',
        label: '已取消'
      }
      ],
        loading: false,
        orderList: [],
        // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        orderNo: null,
      },
      // 总页数
      total: 0,
      form: {
        orderNo: null,
        orderId: null,
        total: null,
        status: null
      },
      open: false
      }
    },

    created() {
      this.getOrderList()
    },

    methods: {
      getOrderList() {
        this.loading = true
        listOrderByPage(this.queryParams).then(response => {
        this.orderList = response.data.list
        this.total = response.data.total
        this.loading = false
      })
      },

      /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getOrderList()
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.$refs.queryForm.resetFields()
      this.getOrderList()
    },

    /** 处理分页 */
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getOrderList()
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getOrderList()
    },

    handleUpdate(row) {
      this.form.orderNo = row.orderNo
      this.form.orderId = row.orderId
      this.form.status = row.status
      this.form.total = row.total
      this.open = true
    },

    /** 提交按钮 */
    submitForm: function() {
      updateOrder(this.form).then(response => {
        this.$message.sussess(response.msg)
      })
      this.open = false
      this.getOrderList()
    },

    }

  }
</script>

<style>

</style>
